<template>
    <div>
        <Modal :draggable="!$config.mask" :mask="$config.mask" :mask-closable="!$config.mask"
               :value="value"
               @on-ok="save"
               @on-visible-change="visibleChange"
               :width="1000">
            <p slot="header">
                选择角色
            </p>
            <role-select ref="roleSelect" v-model="selectedRoles" :additional="modalData.additional?modalData.addtional:null"></role-select>
            <div slot="footer">
                <Button icon="md-close" @click="cancel">取消</Button>
                <Button icon="md-checkmark" type="primary" @click="save" :disabled="selectedRoles.length===0">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import RoleSelect from '@/components/select/role-select.vue';

@Component({
    components: {RoleSelect},
})
export default class RoleSelectModal extends AbpBase {
    name: string = 'RoleSelectModal';
    @Prop({type: Boolean, default: false}) value: boolean;
    @Prop({
        type: Object, default: () => {
        }
    }) modalData: any;

    selectedRoles: any[] = [];


    visibleChange(value: boolean) {
        if (!value) {
            this.reset();
            this.$emit('input', value);
        } else {
            (this.$refs.roleSelect as any).selectedRoles = this.modalData.selectedRoles;
        }
    }

    save() {
        this.$emit('submit', this.selectedRoles,this.modalData.opener);
        this.$emit('input', false);
    }

    cancel() {
        this.$emit('input', false);
    }


    reset() {
        (this.$refs.roleSelect as any).selectedRoles = [];
        (this.$refs.roleSelect as any).init();
        ((this.$refs.roleSelect as any).$refs.tableSelect as any).filter = '';
        ((this.$refs.roleSelect as any).$refs.tableSelect as any).sorting = '';
        ((this.$refs.roleSelect as any).$refs.tableSelect as any).currentPage = 1;
    }


    created(){
    }
}
</script>

<style lang="less" scoped>

</style>
